<!-- 开支列表 -->
<template>
  <ele-modal
    form
    :width="1400"
    :model-value="modelValue"
    :title="title"
    @update:modelValue="updateModelValue"
  >
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
      stripe
    >
      <template #amount="{ row }">
        <span :class="row.amountClass">{{ row.amount }}</span>
      </template>
    </ele-pro-table>
  </ele-modal>
</template>

<script setup>
  import { ref, watch, computed } from 'vue';

  import { pageVehicleIncomeExpense } from '@/api/company';

  const emit = defineEmits(['done', 'update:modelValue']);

  const props = defineProps({
    /** 弹窗是否打开 */
    modelValue: Boolean,
    /** 修改回显的数据 */
    vehicleId: Number,
    plateNumber: String
  });

  /** 表单实例 */
  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [];

    cols.push(
      {
        prop: 'id',
        label: 'ID',
        width: 80
      },
      {
        prop: 'cate',
        label: '费用分类'
      },
      {
        width: 120,
        prop: 'io_type',
        label: '收支类型'
      },
      {
        width: 120,
        slot: 'amount',
        label: '金额'
      }
    );

    cols.push({
      width: 100,
      align: 'center',
      slot: 'pay_images',
      label: '付款图片'
    });

    cols.push(
      {
        width: 70,
        align: 'center',
        prop: 'area',
        label: '区域'
      },
      {
        width: 120,
        prop: 'plate_number',
        label: '车牌号码'
      },
      {
        prop: 'company',
        label: '车队'
      },
      {
        prop: 'create_time',
        label: '时间'
      }
    );

    return cols;
  });

  const datasource = ({ page, limit, where, orders }) => {
    return pageVehicleIncomeExpense({
      ...where,
      ...orders,
      page,
      limit,
      vehicle_id: props.vehicleId,
      status: 20
    });
  };

  /** 更新modelValue */
  const updateModelValue = (value) => {
    emit('update:modelValue', value);
  };
  const title = ref('');
  watch(
    () => props.modelValue,
    (modelValue) => {
      if (modelValue) {
        title.value = props.plateNumber + '的收支记录';
      } else {
        console.log('无');
      }
    }
  );
</script>
